<template>
  <div class="hostelItem" v-for="i in list" :key="i.id">
    <div class="bed-title">{{ i.roomNumber }}</div>
    <div class="hostel-content">
      <BedItem v-for="item in i.beds" :key="item.id" :info="item"></BedItem>
    </div>
  </div>
</template>

<script setup>
import BedItem from './bedItem.vue'
import { room } from '@/api/index'
import { ref, onMounted } from 'vue'
const props = defineProps({
  id: {
    type: Number,
    required: true
  }
})
const list = ref([])
onMounted(async () => {
  const res = await room(props.id)
  list.value = res.result.data.filter(item => {
    item.beds = item.beds.filter(item2 => !item2.guest)
    return item.beds.length
  })
  console.log(list)
})
</script>

<style lang="scss" scoped>
$main-color: #49a2ff;
$main-color2: #f775c0;
.hostelItem {
  width: 80%;
  border: 2px solid $main-color;
  margin-bottom: 20px;
  position: relative;
  margin: 15px auto;
  .bed-title {
    text-align: center;
    font-size: 30px;
    color: $main-color;
    border-bottom: 1px solid $main-color;
  }
  .hostel-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .w220 {
    width: 220px;
  }
}
</style>
